<template>
    <div class="meterial">
        <!-- 头部饼图 -->
        <div class="headerBox">
            <div v-for="(item, index) in list" :key="index" class="headerBoxItem">
                <div>{{item.name}}</div>
                <div :id="'echarts'+index"></div>
            </div>
        </div>
        <!-- 资产分类统计 -->
        <div class="classPart" >
            <div class="first">
                <span>耗材分类统计</span>
                <div>
                    <span>
                        <span></span>
                        <span>库存数量累计</span>
                    </span>
                    <span>
                        <span></span>
                        <span>领用数量</span>
                    </span>
                </div>
            </div>
            <div class='item' v-for="(item, index) in listOfClass" :key="index">
                <div :id='"echartsOfMClass"+index' ></div>
                <div>{{item.category_name}}</div>
            </div>
        </div>
        <!-- 部门使用耗材排行榜 -->
        <div class="onePart">
            <div id="mechartsOfClass"></div>
              <div class="shouwMoare">
                    <!-- <div class="btn">
                        <span :class="form.month1?'whiteC':'blueC'" @click="getMonth(1,'no')">累计</span>
                    </div> -->
                    <el-button class="btn" :class="form.month1?'whiteC':'blueC'" @click="getMonth(1,'no')" :disabled="!form.month1">累计</el-button>
                    <el-date-picker :clearable="false" style="width:136px" @change='val=>{getMonth(1,"value",val)}' v-model="form.month1" value-format='yyyy-MM' type="month"  placeholder="选择月"></el-date-picker>
                   
                    <el-button  class="morebtn" :disabled="form.disabled1" @click="form.page1++;getMonth(1)">查看更多</el-button>

              </div>
        </div>
        <!-- 个人使用耗材排行榜 -->
        <div class="onePart">
            <div id="mechartsOfUser"></div>
              <div class="shouwMoare">
                    <div>展示消耗费用最多的前30名</div>
                    <!-- <div class="btn">
                        <span :class="form.month2?'whiteC':'blueC'" @click="getMonth(2,'no')">累计</span>
                    </div> -->
                    <el-button class="btn" :class="form.month2?'whiteC':'blueC'" @click="getMonth(2,'no')" :disabled="!form.month2">累计</el-button>
                    <el-date-picker :clearable="false" style="width:136px" @change='val=>{getMonth(2,"value",val)}' v-model="form.month2" value-format='yyyy-MM' type="month"  placeholder="选择月"></el-date-picker>
                    
                     <el-button  class="morebtn" :disabled="form.disabled2" @click="form.page2++;getMonth(2)">查看更多</el-button>
                </div>
        </div>
    </div>
</template>

<script>
/* eslint-disable */ 
import moment from 'moment'
import {getReportformOfMeterial,getMCountOfUser,getMCountOfDept} from '../api'
export default {
    name:"meterial",
    props:['whId'],
    data(){
        return {
            wh_id:'',
            dept_id:'',
            echartsHeight:120,
            form:{
                month1:new Date(),
                page1:1,
                disabled1:false,
                disabled2:false,
                data1:[],
                page2:1,
                data2:[],
                month2:new Date(),
            },
            list:[],
            listOfClass:[]
        }
    },
    mounted(){
        this.getData(this.whId)
    },
    methods:{
        /**头部bin */
        getReportformFn(){
            getReportformOfMeterial({wh_id:this.wh_id,dept_id:this.dept_id}).then(res=>{
                this.list = res.count
                res.count&&res.count.length?res.count.forEach((element,index) => {
                    this.setBin(index,element)
                }):''
                this.listOfClass = res.cate
                res.cate&&res.cate.length?res.cate.forEach((element,index) => {
                    this.setClassBin(index,element)
                }):''
            })
        },
        /*底下两个 */
        getMonth(index,label){
            if(label=='now'){
                this.form['month'+index] = new Date()
            }
            if(label=='no'){
                this.form['month'+index] = ''
                this.form['page'+index] = 1
            }
            switch(index){
                case 1:
                    getMCountOfDept({wh_id:this.wh_id,month:label=='no'?'':moment(this.form.month1).format('YYYY-MM'),page:this.form.page1}).then(res=>{
                        let obj = {
                            label:'部门使用耗材排行榜',
                            name:['耗材数量','耗材价值'],
                            xAxisName:'name',
                            top:35,
                            right:30,
                            bottom:60,
                        }
                        this.form.disabled1 = Number(res.current_page)>=Number(res.last_page) 
                        let mydata = []
                        if(this.form.page1==1){
                            mydata = res.data
                            this.form.data1 = res.data
                        }else{
                            mydata = [...res.data,...this.form.data1]
                            this.form.data1 = mydata
                        }
                        this.setBar('mechartsOfClass',mydata,obj)
                    });
                break;
                case 2:
                    getMCountOfUser({wh_id:this.wh_id,month:label=='no'?'':moment(this.form.month2).format('YYYY-MM'),page:this.form.page2}).then(res=>{
                        let obj = {
                            label:'个人使用耗材排行榜 ',
                            name:['耗材数量','耗材价值'],
                            xAxisName:'re_user_name',
                            top:35,
                            right:30,
                            bottom:60,
                        }
                        this.form.disabled2 = Number(res.current_page)>=Number(res.last_page) 
                        let mydata = []
                        if(this.form.page2==1){
                            mydata = res.data
                            this.form.data2 = res.data
                        }else{
                            mydata = [...res.data,...this.form.data2]
                            this.form.data2 = mydata
                        }
                        this.setBar('mechartsOfUser',mydata,obj)
                    });
                break;
            }
            
        },
         /**设置柱状图 */
        setBar(obj,data,subfix){
           log(obj,data,subfix)
           let maxSpan = Math.floor((window.innerWidth-320)/40)
           let option = {
               dataZoom: {
                    show:data.length>maxSpan, // 为true 滚动条出现
                    realtime: true,  
                    type:'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
                    height: 20, // 表示滚动条的高度，也就是粗细
                    maxValueSpan:maxSpan,
                },
                color: ['#00BB7A', '#FF9502',],
                title: {
                    text:subfix.label,
                    left:'37px',
                    textStyle:{
                        lineHeight: 24,
                        color: 'rgba(16, 16, 16, 1)',
                        fontSize: 16,
                        fontWeight:600,
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // type: 'shadow'
                        type: ''
                    },
                    formatter:'{a0}: {c0}件<br />{a1}: {c1}元'
                },
                legend: {
                    data:subfix.name,
                    top:subfix.top,
                    right:subfix.right||135,
                    textStyle:{
                        fontSize:14,
                        color:'rgba(70, 70, 70, 1)',
                    },
                },
                grid: {
                    left: '3%',
                    top:'25%',
                    right:'5%',
                    bottom:subfix.bottom||85,
                    show:false,
                    containLabel:false,
                },
                yAxis:[
                    {
                        type: 'value',
                        name: '数量',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: false
                        },
                        axisTick:{//坐标轴刻度的设置
                            show:false
                        }
                        
                    },
                    {
                        type: 'value',
                        name: '价值',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: false
                        },
                        axisTick:{//坐标轴刻度的设置
                            show:false
                        }
                    },
                ],
                xAxis : {
                    type: 'category',
                    axisTick: {
                        show: false,
                        interval:0,
                    },
                    axisLabel:{
                        // inside:true
                        rotate :45,
                    },
                    data:data&&data.length?data.map(item=>{
                        return item[subfix.xAxisName]
                    }):[]
                },
                series: [
                    {
                        name: subfix.name[0],
                        type: 'bar',
                        barWidth:10,
                        barGap: 0,
                        data: data&&data.length?data.map(item=>{
                            return item.num
                        }):[]
                    },
                    {
                        name: subfix.name[1],
                        type: 'bar',
                        barGap: 0,
                        barWidth:10,
                        yAxisIndex: 1,
                        data: data&&data.length?data.map(item=>{
                            return  Number(item.c_unit_price)
                        }):[]
                    }
                ]
            };
            this.$nextTick(()=>{
                let echarts = this.$echarts.init(document.getElementById(obj))
                echarts.setOption(option);
            })
        },
        /*获取所有数据 */
        getData(wh_id){
            this.wh_id = wh_id
            let department = this.$store.state.users.department 
            this.dept_id = department&&department.length?department.map(item=>{
                return item.dept_id
            }).join(','):''
            this.getReportformFn()
            this.getMonth(1)
            this.getMonth(2)
        },
        setClassBin(index,element){
            let  option = {
                color:['#34C758','#FF9502'],
                legend: {
                    show:false,
                    data:['库存数量累计','领用数量']
                },
                series: [
                    {
                        type: 'pie',
                        radius:['35px','40px'],
                        // center: ['50%',96],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                            formatter : [
                                    `{a|${element.re_num}}`,
                                    `{b|${element.num}}`
                                ].join('\n'),
                            rich:{
                                a: {
                                    color:'#FF9502',
                                    fontSize: 12,
                                    fontWeight:400
                                },
                                b: {
                                    color: '#34C758',
                                    fontSize:14 ,
                                    lineHeight:25,
                                    fontWeight:600
                                },
                            }
                        },
                        labelLine: {
                            show: false,
                            
                        },
                        data:[{value:element.num,name:'库存数量累计'},{value:element.re_num,name:'领用数量'}]
                        // element.status&&element.status.length?element.status.map(item=>{
                        //     return {value:item.status,name:item.status_name}
                        // }):[]
                    }
                ]
            }
            this.$nextTick(()=>{
                let echarts = this.$echarts.init(document.getElementById('echartsOfMClass'+index))
                echarts.setOption(option);
            })
        },
        setBin(index,element){
            let arr = ['总数量','总价值','新增数量','总数量','总次数',]
            let  option = {
                color:['#FF2D55','#28CC41'],
                legend: {
                    orient: 'horizontal',
                    icon: 'circle',
                    bottom:0,
                    left: 0,
                    textStyle:{
                        width:'50%'
                    },
                    width :'200px',
                    data:element.status&&element.status.length?element.status.map(item=>{
                            return item.status_name
                    }):[]
                },
                series: [
                    {
                        type: 'pie',
                        radius: [50, 60],
                        center: ['50%',96],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                            formatter : [
                                    `{a|${arr[index]}}`,
                                    `{b|${element.status[0].status+element.status[1].status}}`
                                ].join('\n'),
                            rich:{
                                a: {
                                    color:'rgba(174, 174, 178, 1)',
                                    lineHeight:30,
                                    fontSize: 14,
                                    fontWeight:400
                                },
                                b: {
                                    color: 'rgba(16, 16, 16, 1)',
                                    fontSize: 20,
                                    fontWeight:600
                                },
                            }
                        },
                        labelLine: {
                            show: false,
                            
                        },
                        data:element.status&&element.status.length?element.status.map(item=>{
                            return {value:item.status,name:item.status_name}
                        }):[]
                    }
                ]
            };
            this.$nextTick(()=>{
                let echarts = this.$echarts.init(document.getElementById('echarts'+index))
                echarts.setOption(option);
            })
        }
    }
}
</script>

<style lang='stylus' scoped>
.meterial
    .headerBox 
        display flex 
        flex-wrap wrap
        >div:last-child 
            margin-right 0
        .headerBoxItem
            width: 267px;
            height: 253px;
            border-radius: 4px;
            margin-right 14px
            background-color: rgba(255, 255, 255, 1);
            font-family: Roboto;
            padding 20px 30px 30px 30px
            margin-bottom 10px
            display flex
            flex-direction column
            >div:first-child 
                line-height : 24px;
                color: rgba(16, 16, 16, 1);
                font-size: 16px;
                font-weight 600
                padding-bottom 7px
                border-bottom  1px solid rgba(242, 242, 242, 1);
            >div:last-child 
                flex 1
    .onePart
        height 360px
        width 100%
        position relative
        background-color #fff
        margin-bottom 10px
        >div:first-child 
            height 100%
            width 100%
            padding-top 25px
    
    .classPart
        padding 23px 0 40px 35px
        background-color #fff
        margin-bottom 10px
        .first
            display flex
            justify-content space-between
            margin-bottom 15px
            align-items center
            >span:first-child  
                font-weight 600
                color: rgba(16, 16, 16, 1);
                font-size: 18px;
            >span>span>:first-child  
                font-weight 600
                color: rgba(16, 16, 16, 1);
                font-size: 18px;
            >div>span>span:first-child 
                display inline-block 
                width 10px
                height 10px
                border-radius 50%
                margin-right 5px
            >div>span:first-child
                margin-right 5px 
                >span:first-child
                    background-color #34C758 
            >div>span:last-child
                margin-right 43px
                >span:first-child
                    background-color #FF9502 
            
        .item 
            width 127px
            margin 30px 12px 0 0
            display inline-block
            >div:first-child 
                width 80px
                height 80px
            >div:last-child 
                color: rgba(89, 89, 89, 1);
                font-size: 12px;
                width 80px
                margin-top 7px
                text-align: center;
    .shouwMoare
        position absolute 
        top 20px
        right 34px 
        display flex 
        align-items center
        >div:first-child
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
        .btn 
            margin 0 7px 0 14px
            border-radius: 3px 
            height: 30px;
            width: 60px;
            >span
                font-size: 12px;
        .whiteC 
            color: rgba(0, 0, 0, 0.65);
            background-color: rgba(255, 255, 255, 1);
            border: 1px solid rgba(225, 225, 225, 1);
        .blueC 
            color #fff
            background-color: rgba(77, 134, 255, 1)!important
            border 1px solid ra(255,255,255,0)!important
        .morebtn
            width: 74px;
            padding 0
            line-height : 28px;
            margin-left 22px
            text-align center
            display inline-block
            border-radius: 50px;
            background-color: rgba(255, 255, 255, 0);
            color: rgba(49, 150, 250, 1);
            font-size: 12px;
            border: 1px solid rgba(49, 150, 250, 1);
            >span  
                font-size 12px!important
</style>